<%--
  Created by IntelliJ IDEA.
  User: w7851
  Date: 2018/5/16
  Time: 7:49
  登陆页面
  用到的地方 login share
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%
    String tuijianren = request.getParameter("recoid");
    if (tuijianren == null) {
        tuijianren = "0";
    }
    request.setAttribute("tuijianren", tuijianren);
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新用户注册</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>

    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>

    <script src="/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="/css/ydui.css">
    <script src="/js/ydui.flexible.js"></script>

    <style type="text/css">
        #content {
            max-width: 750px;
        }

        #errortip, #tipphone, #tippasswd {
            color: red;
            margin-left: 16px;
            display: none;
        }
    </style>
</head>
<body>
<div id="content">


    <div class="g-scrollview">

        <p style="text-align: center;font-size: 0.7rem;margin: 8px 0 16px 0;">新用户注册</p>
        <form action="/mobile" method="post">
            <input name="method" value="regNew" type="hidden">
            <input id="recoid" name="recoid" value="${tuijianren}" type="hidden">

            <div class="m-cell">
                <div class="cell-item">
                    <div class="cell-left">手机：</div>
                    <div class="cell-right"><input id="phone" name="phonenum" type="number"
                                                   class="cell-input" placeholder="请输入手机号码" autocomplete="off"/></div>
                </div>

                <div class="cell-item">
                    <div class="cell-left">密码：</div>
                    <div class="cell-right"><input type="password" id="passwd" class="cell-input"
                                                   placeholder="请输入密码,不少于6位"
                                                   name="passwd"
                                                   autocomplete="off"/></div>
                </div>


                <div class="cell-item">
                    <div class="cell-left">支付宝：</div>
                    <div class="cell-right"><input type="text" id="alipay" class="cell-input" placeholder="用于转账提款"
                                                   name="alipay"
                                                   autocomplete="off"/></div>
                </div>

                <div class="cell-item">
                    <div class="cell-right">
                        <input type="text" name="code" id="code" class="cell-input" placeholder="&nbsp;&nbsp;请输入验证码"
                               autocomplete="off">
                        <img src="/mobile?method=getyzm" style="width: 150px;height: 40px;margin-top: 8px"
                             onclick="changeImg()">
                    </div>
                </div>

            </div>

            <div class="errors">
                <div>
                    <sapn id="tipphone">该手机号已注册</sapn><span id="tippasswd">该手机号已注册</span><span id="errortip">金额有误</span>
                </div>
            </div>

           <p style="text-align: right;padding: 0px 24px;margin-top: 8px;color: #72ACE3;font-size: 0.3rem">(邀请人:${tuijianren})</p>
            <div style="padding: 0 16px;margin-top: 8px">
                <input type="submit" style="margin-top: 0px" class="btn-block btn-primary" value="确认注册">
            </div>

            <%--<div style="margin: 16px">--%>
                <%--<a href="/mobile" style="margin: auto;padding: 0" class="btn-block btn-warning">使用已有账号登陆</a>--%>
            <%--</div>--%>
        </form>

    </div>


</div>
</body>
<script type="text/javascript">

    function changeImg() {
        var imgSrc = $("img");
        var src = "/mobile?method=getyzm&t=" + (new Date().getTime());
        console.log(src);
        imgSrc.attr("src", src);
    }

    $("#phone").blur(function () {
        var vaalue = $(this).val();
        var ok = /\d{11}/.test(vaalue) && (vaalue.length == 11);

        if (!ok) {
            $("#tipphone").show().html("手机号码格式错误");
            return;
        }

        if (ok) {
            $("#tipphone").hide();
        }

        if (ok) {
            $.get("/mobile", {method: "isuserreged", user: vaalue}, function (data) {
                var correct = "ok";
                if (data == correct) {
                    $("#tipphone").hide();
                } else {
                    $("#tipphone").show().html("该手机号码已注册");
                }
            });
        }
    });

    $("#passwd").blur(function () {
        var vaalue = $(this).val();
        var ok = vaalue.length > 5;
        if (ok) {
            $("#tippasswd").hide();
        } else {
            $("#tippasswd").show().html("密码格式或长度不正确");
        }
    });


    $("form").submit(function () {
        var phone = $("#phone");
        var passwd = $("#passwd");
        var ali = $("#alipay");
        var code = $("#code");
        var tip = $("#errortip");
        var reco = $("#recoid");
        var result = false;

        $.ajax(
            {
                type: "POST",
                async: false,
                url: "/mobile",
                data: {
                    "method": "verifyregnew",
                    "phonenum": phone.val(),
                    "passwd": passwd.val(),
                    "alipay": ali.val(),
                    "recoid": reco.val(),
                    "code": code.val()
                },
                success: function (data) {
                    console.log(data);
                    var correct = "ok";
                    if (data == correct) {
                        $("#errortip").hide();
                        result = true;
                    } else {
                        $("#errortip").show().html("输入有误,请检查修正")
                        result = false;
                    }
                }
            }
        );

        if (!result) {
            return false;
        }

    });

</script>
</html>
